<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="./js/echarts/echarts.5.0.0.js"></script>
		<script src="./js/echarts/theme/shine.js"></script>
		<title>EChartd-timeline</title>
	</head>
	<style>
		#chart {
			width: 800px;
			height: 400px;
			display: inline-block;
		}
	</style>
	<body>
		<div id="chart"></div>
	</body>
	<script>
		echarts.init(document.getElementById('chart')).setOption({
			timeline: {
				axisType: 'category', // 坐标轴类型
				realtime: true, // 拖动时是否实时渲染视图
				rewind: false, // 是否启动反向播放，需要将loop置为true
				loop: false, // 是否循环播放
				autoPlay: false, // 是否自动播放
				inverse: false, // 反向置放timeline
				currentIndex: 0, // 起始位置
				playInterval: 1000, // 播放间隔
				controlStyle: {
					// 播放控制器位置
					position: 'left',
				},
				data: [
					'2002-01-01',
					'2003-01-01',
					'2004-01-01',
					{
						value: '2005-01-01',
						tooltip: {
							formatter: '{b} GDP达到一个高度',
						},
						symbol: 'diamond',
						symbolSize: 16,
					},
					'2006-01-01',
					'2007-01-01',
					'2008-01-01',
					'2009-01-01',
					'2010-01-01',
					{
						value: '2011-01-01',
						tooltip: {
							formatter: function (params) {
								return params.name + 'GDP达到又一个高度';
							},
						},
						symbol: 'diamond',
						symbolSize: 18,
					},
				], // timeline数据源
				label: {
					formatter: function (s) {
						return new Date(s).getFullYear();
					},
				}, // timeline坐标值
			},
		});
	</script>
</html>
